<!-- 图库首页 -->
<template>
  <div class="conent_wrap">
    <search-table-form
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :hideSelect="true"
      @selectedRowChange="getSelectedRow"
      :defaultParams="defaultParams"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="分类名称">
            <a-input
              v-model="searchText"
              placeholder="请输入分类名称"
              allowClear
            >
            </a-input>
          </a-form-item>
          <div style="display: flex; align-items: center">
            <a-button type="primary" @click="searchBtn"> 搜索 </a-button>
            <a-button @click="resetForm">重置</a-button>
          </div>
          <!-- <a-form-item label="创建时间">
            <a-range-picker
              style="width: 240px"
              v-decorator="['createDateStart-createDateEnd']"
            >
              <a-icon slot="suffixIcon" type="calendar" />
              <template slot="dateRender" slot-scope="current">
                <div class="ant-calendar-date">
                  {{ current.date() }}
                </div>
              </template>
            </a-range-picker>
          </a-form-item> -->
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission authority="goods:classify:add">
          <a-button
            type="primary"
            icon="plus"
            @click="classifyAdd(false, { add: 'add' })"
            >新增分类</a-button
          >
        </permission>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <permission authority="goods:classify:add">
          <span
            class="text-primary pointer"
            @click="classifyAdd(true, { ...record, add: 'add' })"
            v-if="record.classifyLevel <= 3"
            >添加子集</span
          >
        </permission>
        <a-divider type="vertical" />
        <permission authority="goods:classify:modify">
          <span
            class="text-primary pointer"
            @click="openNew({ ...record, add: 'update' })"
            >编辑</span
          >
        </permission>
        <a-divider type="vertical" />
        <permission authority="goods:classify:delete">
          <a-popconfirm
            title="是否确认删除？"
            @confirm="() => deleteRows([record.id])"
            :getPopupContainer="getPopupContainer()"
          >
            <a href="javascript:;" class="text-danger pointer">删除</a>
          </a-popconfirm>
        </permission>
      </template>
    </search-table-form>
    <classify-modal
      v-model="showModal"
      @handleSubmit="handleSubmit"
      :records="currentRecord"
      :childModal="childModal"
      :title="title"
      :shopId="shopId1"
    ></classify-modal>
  </div>
</template>

<script>
import ClassifyModal from "./components/ClassifyModal";
import SearchTableForm from "./components/SearchTableForm";
import { mapGetters } from "vuex";
export default {
  name: "Division",
  directives: {},
  filters: {},
  mixins: [],
  model: {},
  props: {},
  components: {
    ClassifyModal,
    SearchTableForm,
  },
  data() {
    return {
      showModal: false,
      childModal: false,
      title: "新增分类",
      url: "/goods/classify/tree",
      form: this.$form.createForm(this, { name: "table_search" }),
      currentRecord: {},
      columns: [
        {
          title: "分类名称",
          dataIndex: "classifyName",
          key: "classifyName",
          customRender: (text, row) => {
            return (
              <a href="javascript:;" onClick={() => {}}>
                {text}
              </a>
            );
          },
        },
        {
          title: "创建时间",
          dataIndex: "createDate",
          key: "createDate",
          align: "center",
        },
        {
          title: "排序",
          dataIndex: "sort",
          key: "sort",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      defaultParams: {
        shopId: "",
      },
      shopId1: "",
      searchText: "",
      dataSource1: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.defaultParams.shopId = this.userInfo.shopId;
    this.shopId1 = this.userInfo.shopId;
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  // 方法集合
  methods: {
    getPopupContainer() {
      return (triggerNode) => triggerNode.parentNode.parentNode;
    },
    bianping(arr) {
      var res = [];
      for (var i = 0; i < arr.length; i++) {
        var item = arr[i];
        if (item.children.length > 0) {
          res = res.concat(this.bianping(item.children));
        }
        res.push(item);
      }
      return res;
    },
    initData(records) {
      let source = this.$refs.searchtable.dataSource;
      let array = this.bianping(source);
      array.reverse();
      if (records.parentId == 0) return records;

      if (records.classifyLevel >= 2) {
        array.forEach((item) => {
          if (records.parentId == item.id) {
            records.parentName = item.classifyName;
            return;
          }
        });
      } else {
        source.forEach((item) => {
          if (records.parentId == item.id) {
            records.parentName = item.classifyName;
          }
        });
      }
      return records;
    },
    async getDataSource() {
      let res = await this.$get("/goods/classify/tree", {
        shopId: this.shopId1,
      });
      if (res && res.returnCode == "1000") {
        this.dataSource1 = res.dataInfo;
      }
    },
    async resetForm() {
      this.searchText = "";
      await this.getDataSource();
      this.$refs.searchtable.dataSource = await this.dataSource1;
    },
    async searchBtn() {
      await this.getDataSource();
      this.$refs.searchtable.dataSource = await this.rebuildData(
        this.searchText,
        this.dataSource1
      );
    },
    rebuildData(value, arr) {
      if (!arr) {
        return [];
      }
      let newarr = [];
      arr.forEach((element) => {
        if (element.classifyName.indexOf(value) > -1) {
          // const ab = this.rebuildData(value, element.children);
          const ab = element.children;
          const obj = {
            ...element,
            children: ab,
          };
          newarr.push(obj);
        } else {
          if (element.children && element.children.length > 0) {
            const ab = this.rebuildData(value, element.children);
            const obj = {
              ...element,
              children: ab,
            };
            if (ab && ab.length > 0) {
              newarr.push(obj);
            }
          }
        }
      });
      return newarr;
    },
    getSelectedRow(rows) {
      console.log("选择的", rows);
      // if (rows.length > 0) {
      // 	this.currentSelectedProductInfo = rows[0]
      // }
      // console.log('row', this.currentSelectedProductInfo)
    },
    openNew(records) {
      this.currentRecord = this.initData(records);
      if (records.parentId != 0) {
        this.childModal = false;
        this.title = "编辑子分类";
      } else {
        this.childModal = false;
        this.title = "编辑分类";
      }
      this.showModal = true;
    },
    deleteRows(id) {
      this.$post("/goods/classify/delete", id).then((res) => {
        if (res && res.returnCode === 1000) {
          this.$refs.searchtable.refreshTable();
        }
      });
    },
    classifyAdd(childModal, record) {
      this.childModal = childModal;
      this.currentRecord = this.initData(record);
      this.currentRecord.classifyName1 = this.currentRecord.classifyName;
      this.currentRecord.classifyName = "";
      // this.currentRecord.sort = "";
      if (childModal) {
        this.title = "新增子分类";
        // this.currentRecord.name = record.classifyName
        // this.currentRecord.classifyName = ''
      } else {
        this.title = "新增分类";
      }
      this.showModal = true;
    },
    handleSubmit() {
      this.showModal = false;
      this.$refs.searchtable.refreshTable();
    },
  },
};
</script>
<style rel="stylesheet/less" lang="less" scoped>
/deep/.ant-pagination {
  display: none;
}
/deep/.searchBtn {
  display: none;
}
/deep/.resetBtn {
  display: none;
}
/deep/.ant-form-inline {
  display: flex;
}
/deep/.search-form {
  display: flex;
  align-items: center;
}
/deep/.ant-btn {
  margin-top: 0 !important;
  margin-right: 20px;
}
/deep/ .ant-table-row-level-3{
  .ant-table-row-expand-icon{
    display: none;
  }
  .indent-level-3{
    padding-left:85px!important;
  }
}
</style>
